<template>
  <div>
    <h3>输入框</h3>
    <KForm :model="model" :rules="rules" ref="loginForm">
      <KFormItem label="用户名" prop="username">
        <KInput v-model="model.username" placeholder="admin"></KInput>
      </KFormItem>
      <KFormItem label="密码" prop="password">
        <KInput
          type="password"
          v-model="model.password"
          placeholder="1234"
        ></KInput>
      </KFormItem>
      <k-form-item>
        <button @click="login">登录</button>
      </k-form-item>
    </KForm>
  </div>
</template>

<script>
import KInput from "@/components/form/KInput.vue";
import KFormItem from "@/components/form/KFormItem.vue";
import KForm from "@/components/form/KForm.vue";

export default {
  components: {
    KInput,
    KFormItem,
    KForm,
  },
  data() {
    return {
      model: {
        username: "tom",
        password: "",
      },
      rules: {
        username: [{ required: true, message: "用户名必填" }],
        password: [{ required: true, message: "密码必填" }],
      },
    };
  },
  methods:{
    login(){
      this.$refs.loginForm.validate(isValidate => {
        if(isValidate){
          alert('登录中。。。')
        }else{
          alert('错误，需要重新输入')
        }
      })
    }
  }
};
</script>

<style lang="scss" scoped>
</style>